<template>
  <view>
    <scroll-view enable-back-to-top @scrolltolower="loadMore"   scroll-y="true" class="category-tabs-wrap">
      <!-- 瀑布流 -->
      <view class="u-waterfall" :class="title?'u-waterfalls':''">
        <view id="u-left-column" class="u-column" style="width: 48%;">
          <view class="goods-item u-m-b-16 u-m-r-16 u-flex u-row-center u-col-center"
                v-for="leftGoods in leftList" :key="leftGoods.id">
            <shopro-goods-card style="width: 100%;" :toptitle="title" :detail="leftGoods"
                               :type="leftGoods.activity_type || ''" :image="leftGoods.image" :title="leftGoods.title"
                               :subtitle="leftGoods.subtitle" :price="leftGoods.price" :isVip="isVip" :vip_price="leftGoods.vip_price"
                               :discount_price="leftGoods.discount_price" :originPrice="leftGoods.original_price"
                               :tagTextList="leftGoods.activity_discounts_tags" :tag_list="leftGoods.tag_list"
                               :zeng_text="leftGoods.zeng_text||''"
                               @click="$Router.push({ path: '/pages/goods/new_detail', query: { id: leftGoods.id } })">
            </shopro-goods-card>
          </view>
        </view>
        <view id="u-right-column" class="u-column" style="width: 48%;">
          <view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="rightGoods in rightList"
                :key="rightGoods.id">
            <shopro-goods-card style="width: 100%;" :toptitle="title" :detail="rightGoods"
                               :type="rightGoods.activity_type || ''" :image="rightGoods.image" :title="rightGoods.title"
                               :subtitle="rightGoods.subtitle" :price="rightGoods.price" :isVip="isVip" :vip_price="rightGoods.vip_price"
                               :discount_price="rightGoods.discount_price" :originPrice="rightGoods.original_price"
                               :tagTextList="rightGoods.activity_discounts_tags" :tag_list="rightGoods.tag_list"
                               :zeng_text="rightGoods.zeng_text||''"
                               @click="$Router.push({ path: '/pages/goods/new_detail', query: { id: rightGoods.id } })">
            </shopro-goods-card>
          </view>
        </view>
      </view>
      <view class="x-c" style="width: 100%;">
        <!-- 缺省页 -->
        <shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/empty_goods.png'"
                      tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty>

        <!-- 更多 -->
        <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#d4d4d4" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
	/**
	 * category-tabs
	 * @description 一个可以吸顶的分类列表
	 * @property {Boolean} enable = false - 是否吸顶,tabbar项中，组件不会自动销毁，需要自行开关
	 * @property {Array | Number} styleType  - 卡片类型
	 */
	let systemInfo = uni.getSystemInfoSync();
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	import shGoodsCard from '../../pages/index/components/sh-goods-card.vue';
	export default {
		components: {
			shGoodsCard
		},
		data() {
			return {
				height: 'auto',
				left: 0,
				// 瀑布流 350-330
				addTime: 10, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				listParams: {
					category_id: 0,
					keywords: '',
					page: 1
				},
				leftList: [],
				rightList: [],
				tempList: [],
				scrollLeft: 0,
				isEmpty: false,
				goodsList: [],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				isVip:0,
        lock:true
			};
		},
		watch: {
			seckilltime(val) {
				if (val) {
					this.clear()
					this.getGoodsList("1");
				}

			},
			dazhelei(val) {
				if (val) {
					this.clear()
          setTimeout(()=>{
            this.getGoodsList("5");
          },400)

				}
			},
      'filterData.filterIndex'(val){
        if(val){
          this.clear();
          setTimeout(()=>{
            this.getGoodsList("5");
          },400)
        }
      },
      'filterData.priceOrder'(val){
        if(val){
          this.clear();
          setTimeout(()=>{
            this.getGoodsList("5");
          },400)
        }
      },
		},
		props: {
			enable: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "惠选首页"
			},
      category_id: {
        type: String,
        default: ""
      },
			typeId: {
				type: String,
				default: ""
			},
			searchVal: {
				type: String,
				default: ""
			},
			seckilltime: {
				type: String,
				default: ""
			},
			dazhelei: {
				type: String,
				default: ""
			},
      filterData: {
        type: Object,
        default: {
          defaultOrder:0,
          priceOrder:0,
          salesOrder:0,
          newProdcutOrder:0
        }
      },
		},
		created() {
			var that = this;
			if (that.title == '惠选首页' || that.title == '惠选分类商品' || that.title == '新品预售') {
				that.getGoodsList("3");
			}
			console.log("=category_id", this.category_id)
			this.getVip();
		},
		mounted() {},
		beforeDestroy() {},
		methods: {
      loadMore(){
        var that = this;
        if (that.currentPage < that.lastPage) {
          that.currentPage += 1;
          that.getGoodsList();
        }
      },
			getVip() {
				this.$https('user.isVip').then(res => {
					if (res.code === 1) {
						this.isVip = res.data;
					}
				})
			},
			// 瀑布流相关
			async splitData() {
				if (!this.tempList.length) return;
				let item = this.tempList[0];
				if (!item) return;
				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
					// if(JSON.stringify(this.leftList).indexOf(JSON.stringify(item))==-1){
					//   this.leftList.push(item);// 进行动态的操作
					// }
					this.leftList.push(item); // 进行动态的操作
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += item.activity_discounts_tags.length ? 350 : 330;
					// if(JSON.stringify(this.rightList).indexOf(JSON.stringify(item))==-1){
					//   this.rightList.push(item);// 进行动态的操作
					// }
					this.rightList.push(item); // 进行动态的操作
				} else {
					this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
					// if(JSON.stringify(this.leftList).indexOf(JSON.stringify(item))==-1){
					//   this.leftList.push(item);// 进行动态的操作
					// }
					this.leftList.push(item); // 进行动态的操作
				}
				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				// console.log("this.tempList.length============",this.tempList.length,this.tempList)
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
				// console.log("=this.rightList :",this.rightList ,"=this.leftList :",this.leftList ,)
			},
			// 商品列表
			async getGoodsList() {
				let that = this;
				// console.log("====this.lock",this.tempList.length)
        if(that.lock){
          that.lock = false
          if (that.title == '惠选首页') {
            await that.$https('goods.huixuanlist', {
              token: uni.getStorageSync("token"),
              page: that.currentPage
            }).then(res => {
              if (res.code === 1) {

                if (!res.data.data) {
                  return false
                }
                res.data.data.forEach((item) => {
                  let newarr = []
                  item.service.forEach((item1) => {
                    newarr.push(item1.name)
                  })
                  item.tag_list = newarr;
                })
                if (that.currentPage == '1') {
                  that.goodsList = [];
                }
                that.goodsList = [...that.goodsList, ...res.data.data];
                let newarr = [...that.rightList, ...that.leftList];
                let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
                var newarrs = newarr.map(item => item.id);
                that.tempList = allgoodList.filter(item => !newarrs.includes(item.id))
                that.splitData();
                that.isEmpty = !that.goodsList.length;
                that.lastPage = res.data.last_page;
                that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
                that.lock = true
              }
            });
          }
          if (that.title == '镇店之宝') {
            await that.$https('goods.seckillList', {
              token: uni.getStorageSync("token"),
              page: that.currentPage,
              type: "ing",
              param_time: that.seckilltime,
            }).then(res => {
              if (res.code === 1) {

                res.data.data.forEach((item) => {
                  if (item.service) {
                    let newarr = []
                    item.service.forEach((item1) => {
                      newarr.push(item1.name)
                    })
                    item.tag_list = newarr;
                  }
                })
                if (that.currentPage == '1') {
                  that.goodsList = [];
                }
                that.goodsList = [...that.goodsList, ...res.data.data];
                let newarr = [...that.rightList, ...that.leftList];
                let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
                var newarrs = newarr.map(item => item.id);
                that.tempList = allgoodList.filter(item => !newarrs.includes(item.id))
                that.isEmpty = !that.goodsList.length;
                that.lastPage = res.data.last_page;
                that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
                that.splitData();
                that.lock = true
              }
            });
          }
          if (that.title == '热销专区') {
            await that.$https('goods.rexiaoList', {
              token: uni.getStorageSync("token"),
              page: that.currentPage,
              category_id: that.dazhelei,
            }).then(res => {
              if (res.code === 1) {

                res.data.data.forEach((item) => {
                  let newarr = []
                  item.service.forEach((item1) => {
                    newarr.push(item1.name)
                  })
                  item.tag_list = newarr;
                })
                if (that.currentPage == '1') {
                  that.goodsList = [];
                }
                that.goodsList = [...that.goodsList, ...res.data.data];
                let newarr = [...that.rightList, ...that.leftList];
                let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
                var newarrs = newarr.map(item => item.id);
                that.tempList = allgoodList.filter(item => !newarrs.includes(item.id))
                that.isEmpty = !that.goodsList.length;
                that.lastPage = res.data.last_page;
                that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
                that.splitData();
                that.lock = true
              }
            });
          }
          if (that.title == '新品预售') {
            await that.$https('goods.yushouList', {
              token: uni.getStorageSync("token"),
              page: that.currentPage
            }).then(res => {
              if (res.code === 1) {

                res.data.data.forEach((item) => {
                  let newarr = []
                  item.service.forEach((item1) => {
                    newarr.push(item1.name)
                  })
                  item.tag_list = newarr;
                })
                if (that.currentPage == '1') {
                  that.goodsList = [];
                }
                that.goodsList = [...that.goodsList, ...res.data.data];
                let newarr = [...that.rightList, ...that.leftList];
                let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
                var newarrs = newarr.map(item => item.id);
                that.tempList = allgoodList.filter(item => !newarrs.includes(item.id))
                that.isEmpty = !that.goodsList.length;
                that.lastPage = res.data.last_page;
                that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
                that.splitData();
                that.lock = true
              }
            });
          }
          if (that.title == '惠选分类商品') {
            await that.$https('goods.huixuanclasslist', {
              token: uni.getStorageSync("token"),
              page: that.currentPage,
              category_id: that.category_id || '',
              typeId: that.typeId,
              keywords: that.searchVal,
              order:JSON.stringify(that.filterData)
            }).then(res => {
              if (res.code === 1) {

                res.data.data.forEach((item) => {
                  let newarr = []
                  item.service.forEach((item1) => {
                    newarr.push(item1.name)
                  })
                  item.tag_list = newarr;
                })
                if (that.currentPage == '1') {
                  that.goodsList = [];
                }
                that.goodsList = [...that.goodsList, ...res.data.data];
                let newarr = [...that.rightList, ...that.leftList];
                let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
                var newarrs = newarr.map(item => item.id);
                that.tempList = allgoodList.filter(item => !newarrs.includes(item.id))
                that.isEmpty = !that.goodsList.length;
                that.lastPage = res.data.last_page;
                that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
                that.splitData();
                that.lock = true
              }
            });
          }
        }

			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.tempList = [];
			},
		},
	};
</script>

<style lang="scss" scoped>
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.big-card-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.category-tabs-wrap {
    width: 95%;
		height: 100vh;
		margin: 22rpx auto;
		//padding: 10rpx 22rpx;
		background: transparent;
		border-radius: 10rpx;

		// 吸顶
		.u-sticky-wrap {
			background-color: #fff;
		}

		// 瀑布流
		.u-waterfall {
			@include vue-flex;
			flex-direction: row;
			align-items: flex-start;
			margin: 22rpx 22rpx;
		}

		.u-waterfalls {
			margin: 0;
		}

		.u-column {
			@include vue-flex;
			flex: 1;
			flex-direction: column;
			height: auto;
		}
	}

	// 滑动分类
	.tabs-content {
		background: #fff;
		white-space: nowrap;

		.tab-item {
			min-height: 90rpx;
			margin: 30rpx 10rpx 0;
			padding: 0 20rpx;

			.tab-title {
				font-size: 34rpx;
				font-weight: 600;
				color: #666666;
			}

			.title-active {
				color: #333333;
			}

			.tab-des {
				font-size: 60rpx;
				font-weight: 400;
				color: #999999;
				text-align: center;
				background: transparent;
				border-radius: 15rpx;
				padding: 2rpx 20rpx;
				margin-top: 10rpx;
			}

			.des-active {
				background: #333;
				border-radius: 15rpx;
				padding: 2rpx 20rpx;
				color: #ffffff;
				margin-top: 10rpx;
			}
		}
	}
</style>
